<template>
	<view class="add-container">
		<tn-nav-bar  :isBack="false" :alpha="false" backgroundColor="#FFFFFF">开通员工账号</tn-nav-bar>
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<view class="field-title">
				<text>基本信息</text>
			</view>
			<view class="demand-form">
			<tn-form  :model="form" ref="form" :errorType="['message']" labelPosition="top">
			  
				<tn-form-item label="姓名" prop="nickname" :required="true" :borderBottom="false">
					<tn-input v-model="form.nickname" class="input" type="text" placeholder="请填写您的姓名"></tn-input>
					
				</tn-form-item>
				<tn-form-item label="性别" prop="sex" :required="true" class="phone-style" :borderBottom="false">
					 <tn-radio-group v-model="form.sex" >
					      <tn-radio  v-for="(item, index) in statusList" :key="index" :name="item.value"
					        :disabled="item.disabled">
					        {{item.text}}
					      </tn-radio>
					    </tn-radio-group>
					
				</tn-form-item>
				<tn-form-item label="头像" prop="avatar" :required="true" :borderBottom="false">
					 <tn-image-upload :fileList="model.avatar" :action="action" maxCount="1"
					 :header="header" :multiple="false"
					  @on-list-change="imageUploadChange"
					  @on-success="onSuccess"
					  @on-error="onError"
					  @on-remove="onRemove"></tn-image-upload>
					
				</tn-form-item>
				<tn-form-item label="手机" prop="username" :required="true" :borderBottom="false">
					<tn-input v-model="form.username" class="input" type="number" placeholder="请填写手机号" ></tn-input>
				</tn-form-item>
				<tn-form-item label="职务" prop="position" :required="true" :borderBottom="false">
					<tn-input v-model="form.position" class="input" type="text" placeholder="请填写您的职务" ></tn-input>
					
				</tn-form-item>
				<tn-form-item label="服务宣言" prop="service_declaration" :borderBottom="false">
					<tn-input v-model="form.service_declaration" class="input" type="textarea" placeholder="请填写您的服务宣言" ></tn-input>
					
				</tn-form-item>
				<tn-form-item label="服务客户" prop="service_declaration" :borderBottom="false">
					
					<view class="tag flex-row-center">
						<view class="tag-item ellipsis" v-for="item in list" :key="item.id" @click="operate(item)">{{item.client_name}}</view>
						<view class="tag-item" @click="addClient">+添加客户</view>
					</view>
					
				</tn-form-item>
				
			</tn-form>
			</view>
			<!-- <tn-picker mode="time" v-model="timeShow" :params="params" @confirm="timeConfirm"></tn-picker>
			<tn-select v-model="selectShow" mode="single" :title="selectTitle" :list="selectList" @confirm="selectConfirm" :labelName="selectText" :valueName="selectValue"></tn-select> -->
			
			<tn-action-sheet v-model="actionShow" :list="actionList" @click="choose"></tn-action-sheet>
			<uni-popup ref="popup" type="bottom">
				<view class="pop-box">
					<view class="pop-title">{{popTitle}}</view>
					<input class="my-input" type="text" v-model="customer" placeholder="客户名称">
					<view class="pop-operate flex-col-between">
						<button class="form-btn" @click="handleFix">确定</button>
						<button class="cancle" @click="handleCancle">取消</button>
					</view>
				</view>
			</uni-popup>
			<view class="footer">
				<tn-button shape="round" fontSize="32" fontBold backgroundColor="#3B54DA" fontColor="#FFFFFF" width="282rpx" height="72rpx" @click="onSubmit">
					<!-- <text class="tn-icon-add"></text> -->
					提交申请</tn-button>
			</view>
		</view>
	</view>
</template>

<script>
	import configService from '@/common/service/config.service.js'
	export default {
		data() {
			return {
				popTitle:'',
				action: configService.apiUrl+'/api/file/avatar',
				header:{
					'cx-auth-token':configService.CX_AUTH_TOKEN
				},
				form:{},
				list:[],
				actionShow: false,
				customer:'',
				currentTag:'',
				actionList: [{
						text: "修改客户",
						fontSize: 32,
						color:'#525252'
					},
					{
						text: "删除客户",
						fontSize: 32,
						color:'#525252'
					}
				],
				value: '',
				statusList:[{text:'男',value:'1'},{text:'女',value:'2'}],
				rules: {
					 nickname: [{
							required: true,
							message: '请输入您的姓名',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
					 }],
					 sex: [{
							required: true,
							message: '请选择您的性别',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
					 }],
					 avatar:[{
						required: true,
						message: '请上传您的头像',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					  }],
					  username:[{
							required: true,
							message: '请填写您的手机号码',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
					   },
					   {
							message: '手机号码不正确',
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$tn.test.mobile()就是返回true或者false的
								return this.$tn.test.mobile(value);
							},
							trigger: ['change', 'blur'],
					    }],
						position:[{
								required: true,
								message: '请填写您的职务',
								// 可以单个或者同时写两个触发验证方式 
								trigger: ['change', 'blur'],
						 }]
					},
					count:0,
			}
		},
		onUnload() {
			
		},
		onLoad(e) {
			let height = this.$store.getters.vuex_custom_bar_height;
			if(e&&e.scene){//扫码，如果扫码人已经打开过该app会走这
				let scene = decodeURIComponent(e.scene)
				let relist = scene.match(/organization_id=(.*)/)
				console.log('options',relist)
				let sceneId;
				if(relist[1]){
					sceneId = relist[1];
				}
				this.sceneId = sceneId;
			}
			let launchOptions = uni.getLaunchOptionsSync();
			console.log('scence',launchOptions,launchOptions.query.scene)
			console.log('eeeee',e)
			if(!this.sceneId && launchOptions.path == "pages-personal/addAccount/addAdmin"){
				
				
				if(launchOptions.query.id || launchOptions.query.scene){
					////从分享得地方启动得 或扫码
					let sceneId;
					if(launchOptions.query.scene) {
						let scene = decodeURIComponent(launchOptions.query.scene)
						let relist = scene.match(/organization_id=(.*)/)
						console.log(relist)
						if(relist[1]){
							sceneId = relist[1];
						}
						this.sceneId = sceneId;
					}
				} else {
					this.$tip.toast('传参无效')
				}
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
			this.$refs.form.resetFields();
		},
		methods: {
			onSubmit(){
				this.$refs.form.validate(valid => {
				  if (valid) {
					console.log('验证通过',this.form);
					uni.login({
						complete() {
							
						},
						success:async (res) => {
							console.log('submit',res)
							let reqData = {
								...this.form,
								organization_id:this.sceneId,
								code:res.code
							}
							try{
								let result = await this.$http.post('/api/user/apply/handle',reqData)
								console.log('wwww',result)
								if(result.data.status == 200) {
									this.$tip.success('添加成功')
								} else{
									this.$tip.toast(result.data.message)
								}
							}catch(e){
								this.$tip.error(e.message)
									console.log('catch11',e)
							}
							
						}
					})
					
				  } else {
					console.log('验证失败',this.form);
				  }
				});
			},
			onRemove(index, lists, name){
				console.log('onRemove',index, lists, name);
				this.form.avatar = '';
			},
			onError(err, index, lists, name){
				console.log('error',err, index, lists, name)
				this.$tip.alert(err.message);
			},
			onSuccess(data, index, lists, name){
				console.log('succes',data, index, lists, name)
				if(data&&data.status == 200){
					this.form.avatar = data.data;
				} else {
					this.$tip.alert('上传失败');
				}
			},
			imageUploadChange(lists) {
				console.log('listaaa',lists,JSON.parse(JSON.stringify(lists)))
				// if(lists[0]&&lists[0].progress == 0&&lists[0].error){
				// 	this.$tip.alert('上传失败');
				// 	return;
				// }
				// if(lists[0].response&&lists[0].response.status == 200){
				// 	this.form.avtar = lists[0].response.data;
				// }
			  
			},
			operate(item) {
				this.actionShow = true
				this.currentTag = item
				this.customer = item.client_name
			},
			choose(index) {
				if(index == 0) {//修改
					this.actionShow = false;
					this.popTitle = '修改服务客户';
					console.log('edit',this.currentTag)
					this.$refs.popup.open()
				}else {
					this.handleDel()
				}
			},
			handleFix(){
				console.log('xiugai?',this.addFlag)
				let name = this.customer.trim();
				if(name){
					let index = this.list.findIndex((el) => el.client_name == name);
					if(index > -1){
						this.$tip.toast('客户名称重复')
						return;
					} 
					if(this.addFlag){
						this.list.push({client_name:name,id:this.count++});
						console.log('meiyou ',this.list)
					} else {
						let i = this.list.findIndex((el) => el.id == this.currentTag.id);
						this.list[i].client_name = name;
					}
				} else {
					this.$tip.toast('请输入客户名称');
					return;
				}
				this.$refs.popup.close();
				this.addFlag = false;
			},
			handleCancle() {
				this.$refs.popup.close()
			},
			handleDel(){
				let i = this.list.findIndex((el) => el.id = this.currentTag.id)
				this.list.splice(i, 1);
			},
			addClient(){
				this.$refs.popup.open();
				this.popTitle = '添加服务客户';
				this.customer = '';
				this.addFlag = true;
			}
		}
	}
</script>

<style scoped lang="scss">
.add-container{
	background-color: #FFFFFF;
	.field-title{
		padding-top:40rpx;
		color: #000000;
		font-size: 28rpx;
		font-weight: $Semibold;
		text-align: center;
		text{
			vertical-align: middle;
		}
		&:before{
			vertical-align: middle;
			margin-right: 10rpx;
			width: 100rpx;
			height: 6rpx;
			content: '1';
			display: inline-block;
			color: transparent;
			background-image: url('/static/personal/text-left.png');
			background-repeat: no-repeat;
			background-size: 100%;
			background-position: center;
		}
		&:after{
			vertical-align: middle;
			margin-left: 10rpx;
			display: inline-block;
			width: 100rpx;
			height: 6rpx;
			content: '1';
			color: transparent;
			background-image: url('/static/personal/text-right.png');
			background-repeat: no-repeat;
			background-size: 100%;
			background-position: 50%;
		}
	}
	.demand-form{
		padding:20rpx 30rpx calc(112rpx + env(safe-area-inset-bottom));
		/deep/.tn-input__right-icon__item{
			margin-right: 30rpx;
			.icon{
				color: #D7D7D7!important;
				font-size: 32rpx;
			}
			
		}
		/deep/.tn-input__textarea{
			height: 202rpx!important;
		}
		/deep/.tn-input-class{
			border-radius: 20rpx;
		}
		// /deep/.tn-icon-up-triangle:before {
		// 	content: "\e7df";
		// }
		// /deep/.tn-input__text{
		// 	padding:0 20rpx;
		// }
	
	}
	.tag {
		flex-wrap: wrap;
	
		.tag-item {
			width: 158rpx;
			height: 72rpx;
			line-height: 72rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			text-align: center;
			padding: 0 24rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			background: #F7F8FC;
			border-radius: 10rpx;
			color: #6F6F6F;
			&:last-child{
				border: 2rpx solid #C7C7C7;
			}
		}
	}
	.pop-box {
		width: 100%;
		height: 380rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 0 0 ;
		padding: 60rpx 70rpx 0;
		.pop-title {
			margin-bottom: 60rpx;
			font-size: 32rpx;
			line-height: 32rpx;
			font-weight: $Semibold;
			color: #525252;
			text-align: center;
		}
		.pop-operate {
			--btn-width:200rpx;
			--btn-height:56rpx;
			margin-top: 40rpx;
			.cancle {
				width: 200rpx;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				font-size: 32rpx;
				border-radius: 90rpx;
				border: 2rpx solid #7D7D7D;
				color:#7D7D7D;
				background: #FFFFFF;
				box-sizing: border-box;
				cursor: pointer;
			}
		}
	}
	.footer{
		z-index: 10;
		position: fixed;
		bottom: 0;
		width: 100%;
		padding-bottom: env(safe-area-inset-bottom);
		height: calc(112rpx + env(safe-area-inset-bottom));
		display: flex;
		justify-content: center;
		background: #FFFFFF;
		box-shadow:0 4rpx 17rpx 0 rgba(0, 0, 0, 0.1);
		align-items: center;
		.button{
			
		}
		
	}
}
</style>
